<template>
    <h3>叩丁狼商品管理系统</h3>
 <div class="login">
     <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    class="demo-ruleForm"
    
  >
    <el-form-item prop="username">
      <el-input v-model="ruleForm.username" type="text" autocomplete="off" placeholder="请输入账号"/>
    </el-form-item>

    <el-form-item prop="password">
      <el-input v-model.number="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login()"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
 </div>
</template>

<script lang='ts' setup>
import { FormInstance } from 'element-plus';
import type {Ref} from 'vue'
import { reactive, ref } from 'vue';
import {umsAdmin} from '../../request/http';
import { useAdminStore } from '../../store/modules/admin';
import { useRouter } from 'vue-router';

const router = useRouter();
const adminStore = useAdminStore();
const ruleFormRef = ref() as Ref<FormInstance>;
// 绑定的属性
const ruleForm = reactive({
    username :'admin',
    password :'123456'
})

// 校验规则
const rules = reactive({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        {validator:valiUsername,trigger:'blur'}
    ],
    // password: [
    //     { required: true, message: '请输入密码', trigger: 'blur' },
    //     {validator:valiUsername,trigger:'blur'}
    // ]
});

// 验证账号的函数
function valiUsername(
    rule: unknown,
    value: string | undefined,
    cb:( msg?:string )=>void
) {
    if (value && value.length>3) {
        cb()
    } else {
        cb('用户名不能少于3个字符');
    }
}

// 点击登录按钮触发
async function login() {
    // 回调函数方式
    // ruleFormRef.value?.validate((isVal:boolean) => {
    //     console.log(isVal);
    // })

    // promise方式
    // ruleFormRef.value?.validate().then(() => {
    //     console.log('then');
    // }).catch(() => {
    //     console.log('catch');
    // })

    // async await 方式
    try {
        await ruleFormRef.value.validate();
        const loginData = await umsAdmin.adminLogin({
            username: ruleForm.username,
            password: ruleForm.password
        }) 

        if (loginData.code === 200) {
            const { token, tokenHead } = loginData.data;
            localStorage.setItem('token', tokenHead + token);
        }
        // 获取用户信息
        // const adminInfo = await http.getAdminInfo();
        // if (adminInfo.code === 200) {
        //     adminStore.updateMenus(adminInfo.data.menus);
            router.push('/index')
        // }
    } catch(e) {
        console.log('catch');  
    } 
}

</script>
<style lang='less' scoped>
h3{
    font-size: 30px;
    text-align: center;
    margin-top: 220px;
    color: #fff;
}
.login{
    position:absolute;
    inset: 0;
    margin: auto;
    width: 420px;
    height: 450px;
    transform: translate(0,25%);
    .el-input{
        width: 418px;
        height: 50px;
    }
    .el-button{
        width: 420px;
        height: 40px;
    }
    :deep(.el-input__wrapper){
        background-color: transparent;
       border: 1px solid hsla(0,0%,100%,.1);
        
    }
}
</style>